<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .page{
            font-size:16px;
            float:right;
            position:relative;
            display: inline-block;
            font-family: 宋体;
        }
        .dotted-line {
            white-space: nowrap;
            /*float: left;*/
            overflow: hidden;
        }

        * { margin: 0; padding: 0; }
        html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
        table, caption { margin: 0 auto; } /* Application to the caption element addresses Mozilla Bug 297676. */
        table { border-collapse: collapse; }
        caption, th, td { padding: 0.1em 0; }
        caption { text-align: center; font-weight: bolder; }
        thead { display: none; }
        tbody tr { background: url("http://www.myresult.co/images/dot.gif") 0 78% repeat-x; }
        tbody th, td + td { text-align: right; }
        tbody th { padding-right: 0.4em; font-weight: normal; }
        td + td { padding-left: 0.4em; }
        cite { font-style: normal; }
        span { padding: 0 0.2em; white-space: pre; }

        .container {
            width: 500px;
            height: 200px;
            padding: 10px;
        }
        .row {
            line-height: 2em;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: flex;
            -webkit-flex: 1;
            -moz-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
        .row .left {
            -webkit-order: 1;
            -moz-order: 1;
            -ms-order: 1;
            order: 1;
        }
        .row .right {
            -webkit-order: 3;
            -moz-order: 3;
            -ms-order: 3;
            order: 3;
        }
        .row .right:before {
            content: "(";
        }
        .row .right:after {
            content: ")";
        }
        .row:after {
            content: "";
            margin: 0px 4px;
            background: -webkit-radial-gradient(50% 50%, circle, black 12%, transparent 15%);
            background: -moz-radial-gradient(50% 50%, circle, black 12%, transparent 15%);
            background: radial-gradient(circle at 50% 50%, black 12%, transparent 15%);
            background-size: 1em 1em;
            background-position: 0 0.5em;
            background-repeat: repeat-x;
            -webkit-flex-grow: 1;
            -moz-flex-grow: 1;
            -ms-flex-grow: 1;
            flex-grow: 1;
            -webkit-order: 2;
            -moz-order: 2;
            -ms-order: 2;
            order: 2;
        }

    </style>
</head>
<body>
<ul>
    <li class="row">
        <a style="float: left;background: white">工作流程</a>
        <span style="float: right;position: absolute;right: 0px">1</span>
    </li>

    <li>
        <div class="container">
            <div class="row">
                <span class="left">Something</span>
                <span class="right">Something else</span>
            </div>
            <div class="row">
                <span class="left">Something lengthy</span>
                <span class="right">Something else lengthy</span>
            </div>
        </div>


    </li>


</ul>



</body>
</html>